
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>试卷信息</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        .examine-title {
            padding: 10px;
            background-color: #ACD6FF;
            color: darkblue;
        }

        .examine-item {
            padding: 5px 10px;
            border-bottom: 1px solid #ccc;
        }

        input[type='radio'] {
            margin-right: 5px;
            cursor: pointer;
        }

        label {
            margin-right: 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <!--导航栏-->
        <div class="menuW" style="float: left">
            <div class="sideMenu">
                <div class="head">欢迎使用本系统</div>
                <ul>
                    <li class="nLi">
                        <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                        <ul class="sub">
                            <li><a href="index.html"><i class="fa fa-dashboard"></i>首页</a></li>
                        </ul>
                    </li>
                    <li class="nLi on">
                        <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                        </h3>
                        <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="teacherInfo.html"><i class="fa fa-table"></i>教师信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>学生信息</a>
						</li>
						<li v-if="authority.indexOf(4) != -1">
							<a href="fileInfo.html"><i class="fa fa-table"></i>资料信息</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="zuoyeInfo.html"><i class="fa fa-table"></i>提交作业</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html"><i class="fa fa-table"></i>公告信息</a>
						</li>
						<li v-if="authority.indexOf(1000004) != -1">
							<a href="nxTypeInfo.html"><i class="fa fa-table"></i>试题类别</a>
						</li>
						<li v-if="authority.indexOf(1000005) != -1">
							<a href="nxQuestionTypeInfo.html"><i class="fa fa-table"></i>题型信息</a>
						</li>
						<li v-if="authority.indexOf(1000006) != -1">
							<a href="nxQuestionInfo.html"><i class="fa fa-table"></i>试题信息</a>
						</li>
						<li v-if="authority.indexOf(1000007) != -1">
							<a href="nxTestpaperInfo.html"><i class="fa fa-table"></i>试卷信息</a>
						</li>
						<li v-if="authority.indexOf(1000008) != -1">
							<a href="nxScoreInfo.html"><i class="fa fa-table"></i>成绩信息</a>
						</li>

                            <li>
                                <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                            </li>
                        </ul>
                    </li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>资料信息<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="fileInfoComment.html"><i class="fa fa-unlock-alt"></i>资料信息评论</a>
						</li>
					</ul>
				</li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>提交作业<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="zuoyeInfoComment.html"><i class="fa fa-unlock-alt"></i>提交作业评论</a>
						</li>
					</ul>
				</li>

                    <li class="nLi">
                        <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                        <ul class="sub">
                            <li>
                                <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nLi">
                        <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                        <ul class="sub">
                            <li>
                                <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main">
            <!-- 头部开始 -->
            <div class="main-head" style="width: 100%; display: flex">
                <div style="flex: 1; text-align: right">
                    <a href="/front/index.html"> <i class="fa fa-backward" style="margin-right: 5px"></i>返回前台首页</a>
                    <a href="javascript:void(0)" @click="personalPage">当前登录：<span style="color: yellow">{{user.name}}</span></a>
                    <a href="javascript:void(0)" @click="logout">退出登录</a>
                </div>
            </div>
            <!-- 头部结束 -->

            <!-- 主体开始 -->
            <div style="padding: 0 20px">
                <div>
                    <div class="table-title">试卷信息</div>
                </div>

                <!-- 表格主体-->
                <div style="margin-top: 10px">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">试卷信息</div>
                                <div class="panel-body">
                                    <div class="table-responsive" id="content">
                                        <table class="table table-bordered" style="border: 1px solid #ccc">
                                            <thead>
                                            <tr style="background-color: #1E9FFF; color: white">
                                                <th>题号</th>
                                                <th>学生答案</th>
                                                <th>标准答案</th>
                                                <th>标准分数</th>
                                                <th>得分</th>
                                            </tr>
                                            </thead>
                                            <tbody id="tbody">

                                            </tbody>
                                        </table>

                                        <div class="row" style="text-align: center; padding: 10px">
                                            <button class="btn" onclick="submit()">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 表格主体结束-->
            </div>
            <!-- 主体结束 -->
        </div>
    </div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>


<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    const id = getQueryVariable("id");

    new Vue({
        el: '#wrapper',
        data: {
            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            user: {}
        },
        created() {
            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/permission/6").then(res => {
                if (res.data.code === '0') {
                    this.permission = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            if(id) {
                // 获取试卷的html
                $.get(`/nxScoreInfo/${id}`).then(res => {
                    if(res.code === '0') {
                        const data = res.data;
                        const defaultAnswer = JSON.parse(data.defaultAnswer);
                        const userAnswer = JSON.parse(data.userAnswer);
                        for (const key in defaultAnswer) {
                            const keyArr = key.split("_");
                            const num = keyArr[0];
                            let score = keyArr[1];
                            let userScore = score;
                            if(userAnswer[num] !== defaultAnswer[key]) {
                                userScore = 0;
                            }

                            $('#tbody').append(`<tr>
                                        <td>${num}</td>
                                        <td>${userAnswer[num]}</td>
                                        <td>${defaultAnswer[key]}</td>
                                        <td>${score}</td>
                                        <td style="width: 100px"><input type="text" class="form-control" value="${userScore}"></td>
                                        </tr>`)
                        }
                    } else {
                        msg('error',res.msg);
                    }
                });
            } else {
                msg('error',"未找到试卷信息");
            }
        }
    });


    function submit() {
        let sum = 0;
        $('input').each(function () {
            let val = $(this).val();
            if(!/^[0-9][0-9]*([.][0-9]{1,2})?$/.test(val)) {
                alert("请输入合理的分数");
                return false;
            }
            sum += parseFloat(val);
        });

        $.ajax({
            url: '/nxScoreInfo',
            type: 'PUT',
            data: JSON.stringify({id: id, score: sum}),
            contentType: 'application/json',
            success: function (res) {
                if(res.code === '0') {
                    msg('success', '提交成功');
                    location.href = '/end/page/nxScoreInfo.html';
                } else {
                    msg('error', res.msg);
                }
            }
        })
    }

    /**
     * 获取url指定参数
     * @param variable
     * @returns {string|boolean}
     */
    function getQueryVariable(variable) {
        let query = location.href.substring(location.href.indexOf("?") + 1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return '';
    }
</script>
</body>
</html>
